import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import ElementUI from 'element-ui'; //核心js
import 'element-ui/lib/theme-chalk/index.css'; //element-ui css文件
import store from "./store";
import "./assets/styles/common.css"
import "./assets/styles/iconfont.css" //字体图标

import qfSubMenu from "qf-sub-menu"
//引入鉴权方法
import has from "./utils/has"
Vue.prototype.$has=has
Vue.use(ElementUI);
Vue.use(qfSubMenu)
    // Vue.config.productionTip = false;

    //定义全局自定义指令，判断是否具备响应的按钮权限
    Vue.directive("hasPermission",{
        bind(el,binding,VNode){
            let buttons=JSON.parse(localStorage.getItem("qf-permission-buttons"))
          if(!has(buttons,binding.value)){
              
 //禁用按钮
 console.log(el.className);
 //先储存class类名，在这基础上加上is-disabled禁用按钮
 
 let className=el.className
 el.className=className+" "+"is-disabled"
 el.disabled=true
          }
        }
    })
//路由守卫
//核心：路由全局前置钩子beforeEach

router.beforeEach((to, from, next) => {
    //判断本地存储中是否有token,如果有就next放行，如果没有就跳转到登录页
    let token = localStorage.getItem("qf-token")

    //如果用户访问的是login页面，直接放行，如果是其它页面，那么需要验证是否有token，如果没有跳转到login,如果有就直接放行
    if (to.path === "/login") {
        next()
    } else {
        if (token) {
            //判断下vuex中，store可免的sideMenu数组的长度是否为0，如果是，那么重新调用action
            //中获取用户菜单的方法，计算用户菜单，并且渲染
            let { sideMenu } = store.state;
            if (sideMenu && sideMenu.length === 0) {
                //     //防止空指针
                //     //调用action中获取用户菜单的方法
                store.dispatch('FETCH_MENULIST')
                    .then(() => {
                        console.log(to.path);
                        // next({ path: to.path })
                    })
            } else {
                next()
            }
            next()

        } else {
            //没有token，跳转到登入
            next({ path: "/login" })
        }

    }
    //  console.log(to);
    // next()

})

//全局后置钩子
router.afterEach((to, from) => {
    console.log(to);

    //干掉第0项
    let breadCrumb = [...to.matched]
    breadCrumb.splice(0, 1)
    console.log(breadCrumb);
    store.commit('SET_BREADCRUMB', breadCrumb)
})

new Vue({
    router,
    store,
    render: (h) => h(App),
}).$mount("#app");